<template>
  <AddOrEditDialog
    ref="addOrEditDialogRef"
    :form="form"
    title="教师"
    :formHeader="formHeader"
    :url="$urls.API_URL_BACKSTAGE_SCHOOLTEACHER_MANAGE"
    :action="action"
    @afterSubmitSuccess="afterSubmitSuccess"
    >
    <!--职务下拉-->
    <template #positionId>
      <SysPositionTreeSelect
        v-model="form.positionId"
        clearable/>
    </template>

    <!--部门下拉-->
    <template #departmentId>
      <SysMajourDepartmentTreeSelect
        v-model="form.departmentId"
        clearable/>
    </template>

    <!--专业下拉-->
    <template #majorId>
      <SysMajorTreeSelect
        v-model="form.majorId"
        clearable/>
    </template>
  </AddOrEditDialog>
</template>

<script lang="ts" setup>
// 引入添加编辑模块
import AddOrEditDialog from '@/components/base/table/form/AddOrEditDialog.vue';
// 导入职务下拉组件
import SysPositionTreeSelect from '@/components/uem/SysPositionTreeSelect.vue';
// 导入部门下拉
import SysMajourDepartmentTreeSelect from '@/components/uem/SysMajourDepartmentTreeSelect.vue';
// 导入专业下拉
import SysMajorTreeSelect from '@/components/uem/SysMajorTreeSelect.vue';
import {
  computed,
  defineExpose, defineProps, getCurrentInstance, reactive, ref, withDefaults,
} from 'vue';
// 引入表格相关
import { TableColumn, FormHeader, TableData } from '@/types/interface/base_interface';
// 引入学生对象
import { SchoolTeacher } from '@/types/interface/school_interface';
import {
  userSexDict, departmentTypeDict, positionId, yesOrNoDict,
} from '@/api/dict';

const { proxy } = getCurrentInstance();

// 接收父容器参数
interface Props {
  table: TableData, // 偷懒写法
  action?: string, // 表单的处理类型，post表示添加，put表示编辑
}

const props = withDefaults(defineProps<Props>(), {
  action: 'post',
});

// 定义表单元素
// 添加时需输入id，修改时不可动id
const formHeader = ref<FormHeader[]>([
  {
    label: '姓名',
    prop: 'name',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '性别',
    prop: 'sex',
    type: 'select',
    dict: userSexDict,
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '教师编号',
    prop: 'teacherNumber',
    type: 'number',
  },
  {
    label: '是否推荐',
    prop: 'remommend',
    type: 'select',
    dict: yesOrNoDict,
  },
  {
    label: '所属部门',
    prop: 'departmentId',
    type: 'custom',
  },
  {
    label: '专业',
    prop: 'majorId',
    type: 'custom',
  },
  {
    label: '职务',
    prop: 'positionId',
    type: 'custom',
  },
  {
    label: '籍贯',
    prop: 'nativePlace',
    type: 'string',
  },
  {
    label: '民族',
    prop: 'national',
    type: 'string',
  },
  {
    label: '联系电话',
    prop: 'tel',
    type: 'char',
  },
  {
    label: '身份证',
    prop: 'identityCard',
    type: 'char',
  },
  {
    label: '家庭住址',
    prop: 'address',
    type: 'string',
  },
]);
// 表单对象
const form = ref<SchoolTeacher>();
const addOrEditDialogRef = ref(); // 表单ref对象
let formInit:SchoolTeacher; // 记录表单第一次传入的值,用于表单重置恢复初始值使用
// 打开对话框，供父组件调用，传入表单对象
const openDialog = (schoolTeacher: SchoolTeacher) => {
  formInit = { ...schoolTeacher }; // 获取初始值，这里要做深拷贝，避免与form对象引用的地址一致，导致无法恢复初始值
  form.value = schoolTeacher;
  // 打开对话框
  addOrEditDialogRef.value!.openDialog();
};
// 提交表单成功后的钩子函数1
const afterSubmitSuccess = () => {
  // 让表单恢复为传入对象时的初始值，注意要深度拷贝，避免初始值收到污染
  form.value = { ...formInit };
};
// 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>
<style lang="scss" scoped>

</style>
